<html lang="en"><head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>No SVG, no image, CSS-only fluid slider with input[type=range]</title>

    <link rel="stylesheet" href="./style.css">

</head>

<body translate="no" style="--list: none;">
<main class="main flow">
    <h1 class="main__heading">Pricing</h1>
    <div class="main__cards cards">
        <div class="cards__inner">
            <div class="cards__card card">
                <h2 class="card__heading">Basic</h2>
                <p class="card__price">$9.99</p>
                <ul role="list" class="card__bullets flow">
                    <li>Access to standard workouts and nutrition plans</li>
                    <li>Email support</li>
                </ul>
                <a href="#basic" class="card__cta cta">Get Started</a>
            </div>

            <div class="cards__card card">
                <h2 class="card__heading">Pro</h2>
                <p class="card__price">$19.99</p>
                <ul role="list" class="card__bullets flow">
                    <li>Access to advanced workouts and nutrition plans</li>
                    <li>Priority Email support</li>
                    <li>Exclusive access to live Q&A sessions</li>
                </ul>
                <a href="#pro" class="card__cta cta">Upgrade to Pro</a>
            </div>

            <div class="cards__card card">
                <h2 class="card__heading">Ultimate</h2>
                <p class="card__price">$29.99</p>
                <ul role="list" class="card__bullets flow">
                    <li>Access to all premium workouts and nutrition plans</li>
                    <li>24/7 Priority support</li>
                    <li>1-on-1 virtual coaching session every month</li>
                    <li>Exclusive content and early access to new features</li>
                </ul>
                <a href="#ultimate" class="card__cta cta">Go Ultimate</a>
            </div>
        </div>

        <div class="overlay cards__inner"></div>
    </div>
</main>
</body>
<script src="script.js"></script>
</html>